<template>
  <a-modal
    v-bind:visible="isShow"
    width="30%"
    :title="title"
    @ok="handleOk"
    :maskClosable="false"
    @cancel="hanldeCancel"
  >
    <a-form-model
      ref="formRef"
      :rules="ruleForm"
      :model="formData"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 17 }"
    >
      <a-form-model-item label="角色名称" prop="name">
        <a-input v-model="formData.name" placeholder="请输入角色名称"></a-input>
      </a-form-model-item>
      <a-form-model-item label="备注" prop="note">
        <a-textarea v-model="formData.note" placeholder="请输入备注" :rows="4" />
      </a-form-model-item>
      <a-form-model-item label="权限选择">
        <a-tree-select
          v-model="formData.permission_ids"
          style="width: 100%"
          :tree-data="treeData"
          :replaceFields="{ children: 'children', title: 'name', key: 'id', value: 'id' }"
          tree-checkable
        />
      </a-form-model-item>
      <a-form-model-item label="状态">
        <a-radio-group name="status" v-model="formData.status">
          <a-radio :value="1"> 正常 </a-radio>
          <a-radio :value="0"> 禁用 </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addRoleAPI, editRoleAPI } from '@/api/admin.js'
export default {
  name: 'EditRole',
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    treeData: {
      type: Array,
      default: () => []
    },
    object: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    isShow(boolean) {
      if (boolean) {
        if (Object.values(this.object).length > 0) {
          this.formData.ids = this.object.id
          this.formData.name = this.object.name
          this.formData.note = this.object.note
          this.formData.permission_ids = this.object.permission_ids
          this.formData.status = this.object.status
        }
      } else {
        this.formData = {
          brand_id: process.env.VUE_APP_BRAND_ID,
          ids: '',
          name: '', // 角色名称
          note: '', // 备注
          permission_ids: [],
          status: 1
        }
        this.$emit('update:object', {})
      }
    }
  },
  data() {
    return {
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        ids: '',
        name: '', // 角色名称
        note: '', // 备注
        permission_ids: [],
        status: 1
      },
      ruleForm: {
        name: [{ required: true, message: '请输入角色名称' }],
        note: [{ required: true, message: '请输入备注' }]
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        if (Object.values(this.object).length > 0) {
          try {
            const result = await editRoleAPI(this.formData)
            console.log(result)
            this.$emit('upload')
            this.$emit('update:isShow', false)
            this.$message.success(result.msg)
          } catch (error) {
            this.$message.error(error.msg)
          }
        } else {
          try {
            const result = await addRoleAPI(this.formData)
            console.log(result)
            this.$emit('upload')
            this.$emit('update:isShow', false)
            this.$message.success(result.msg)
          } catch (error) {
            this.$message.error(error.msg)
          }
        }
      })
    },
    hanldeCancel() {
      this.$emit('update:isShow', false)
    }
  }
}
</script>

<style lang="less" scoped>
v-deep .ant-row,
.ant-form-item {
  margin-bottom: 10px;
}
</style>
